<template>
  <div>
    <el-select
      v-model="currentYear"
      placeholder="请选择年份"
      @change="changeCurrent"
    >
      <el-option
        v-for="(item, index) in yearList"
        :key="index"
        :label="item"
        :value="item"
      >
      </el-option>
    </el-select>
    <el-select
      v-model="currentMouth"
      placeholder="请选择月份"
      @change="changeCurrent"
    >
      <el-option
        v-for="(item, index) in mouthList"
        :key="index"
        :label="item"
        :value="item"
      >
      </el-option>
    </el-select>
    <el-calendar v-model="currentArry">
      <template slot="dateCell" slot-scope="{ date, data }">
        <p :class="data.isSelected ? 'is-selected' : ''" class="p">
          {{ data.day.split("-")[2] }}
          <span v-if="isWeek(data.day)" class="orange">
            休
          </span>
        </p>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  name: "calendar",
  data() {
    return {
      currentYear: "",
      currentMouth: "",
      yearList: [],
      mouthList: [],
      currentArry: [],
    };
  },
  created() {
    let now = new Date();
    this.currentMouth = now.getMonth() + 1;
    this.currentYear = now.getFullYear();
    let nowtime = this.currentYear + "-" + this.currentMouth + "-" + "01";
    this.currentArry = nowtime;
    for (let i = 2010; i <= 2050; i++) {
      this.yearList.push(i);
    }
    for (let i = 1; i <= 12; i++) {
      this.mouthList.push(i);
    }
    console.log(this.yearList, "year");
    console.log(this.mouthList, "mouth");
  },
  methods: {
    changeCurrent(e) {
      let nowtime = this.currentYear + "-" + this.currentMouth + "-" + "01";
      this.currentArry = nowtime;
    },
    isWeek(value) {
        let time = new Date(value);
      return time.getDay() === 6 || time.getDay() === 0
    },
  },
};
</script>

<style scoped>
.is-selected {
    color:#fff;
    background-color:#1989FA ;
    z-index: 10;
  }
   >>>.el-calendar__header {
   display: none;
 }
 p{
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    width:20px;
    height:20px;
    border-radius: 10px;
    position: relative;
 }
 .orange{
    line-height: 20px;
    position: absolute;
    right:-15px;
    top:-15px;
    font-size: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color:#fff;
     background: rgb(250, 124, 77);
    
 }
</style>